<template>
  <page-meta :root-font-size="fontSize + 'px'"></page-meta>

  <view class="page-container">
    <CustomHeader title="个人信息" :border-line="false" />

    <view class="scene-container" :style="{ top: height }">
      <view class="content">
        <view class="item avatar">
          <view class="left">
            <image class="icon"
              src="https://rwstatic.tentons.cn/web/Lesson/images/home/user-info-icon-1.png">
            </image>
            <text>头像</text>
          </view>
          <view class="header">
            <image class="frame" :src="userData?.headframe.img"></image>
            <image class="icon" :src="userData?.avatar">
            </image>
          </view>
        </view>
        <view class="item" @click="handleOpenDownloadApp">
          <view class="left">
            <image class="icon"
              src="https://rwstatic.tentons.cn/web/Lesson/images/home/user-info-icon-2.png">
            </image>
            <text>昵称</text>
          </view>
          <view class="right">
            <image v-show="userData?.is_vip" mode="widthFix" class="vip_logo"
              src="https://rwstatic.tentons.cn/web/Lesson/images/vip-logo.png">
            </image>
            <text>{{ userData?.nickname }}</text>
            <image class="icon" src="https://rwstatic.tentons.cn/web/Lesson/images/arrow-main-icon.png">
            </image>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <image class="icon"
              src="https://rwstatic.tentons.cn/web/Lesson/images/home/user-info-icon-3.png">
            </image>
            <text>用户ID</text>
          </view>
          <view class="right copy">
            <text class="text">{{ userData?.idcode }}</text>
            <text class="button" @click="handleCopy(userData?.idcode)">
              复制
            </text>
          </view>
        </view>
        <view class="item" @click="handleOpenDownloadApp">
          <view class="left">
            <image class="icon"
              src="https://rwstatic.tentons.cn/web/Lesson/images/home/user-info-icon-4.png">
            </image>
            <text>性别</text>
          </view>
          <view class="right">
            <text>{{ getStatus(userData?.gender, GENDER_STATUS)?.desc }}</text>
            <image class="icon" src="https://rwstatic.tentons.cn/web/Lesson/images/arrow-main-icon.png">
            </image>
          </view>
        </view>
        <view class="item" @click="handleOpenDownloadApp">
          <view class="left">
            <image class="icon"
              src="https://rwstatic.tentons.cn/web/Lesson/images/home/user-info-icon-5.png">
            </image>
            <text>生日</text>
          </view>
          <view class="right">
            <text>{{ userData?.birthday ? userData?.birthday + ' ' + getZodiacSign(userData?.birthday) : '-' }}</text>
            <image class="icon" src="https://rwstatic.tentons.cn/web/Lesson/images/arrow-main-icon.png">
            </image>
          </view>
        </view>
        <view class="item" @click="handleOpenDownloadApp">
          <view class="left">
            <image class="icon"
              src="https://rwstatic.tentons.cn/web/Lesson/images/home/user-info-icon-7.png">
            </image>
            <text>学习阶段</text>
          </view>
          <view class="right">
            <text>{{ userData?.grade || '-' }}</text>
            <image class="icon" src="https://rwstatic.tentons.cn/web/Lesson/images/arrow-main-icon.png">
            </image>
          </view>
        </view>
      </view>
    </view>

    <view @click="Cheese.User?.loginOut(300)" class="button-content">
      <image class="icon" src="https://rwstatic.tentons.cn/web/Lesson/images/home/sign-out-bg.png">
      </image>
      <text class="text">退出登录</text>
    </view>
  </view>

  <CwCommon />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { rootFontSize, getStatus, util } from "@/utils/util";
import CustomHeader from "@/components/customHeader.vue";
import { getAnyApp } from '@/common/hooks';
import type { UserInfoInter } from '@/common/controller/user';
import { onLoad } from "@dcloudio/uni-app";

// 系统总模块
const { Cheese, CHEESE } = getAnyApp(['Vm']);

const GENDER_STATUS = [
  {
    code: CHEESE.Enum.GenderEnum.MAN,
    desc: '男'
  },
  {
    code: CHEESE.Enum.GenderEnum.GIRL,
    desc: '女'
  }
]

// 公用常量
const userData = ref<UserInfoInter>();

const fontSize = rootFontSize();

const height = ref(getApp().globalData!.pageTop);

onLoad((options) => {
  userData.value = CHEESE.Router.formatStructure(options).userInfo;
});

const handleCopy = (text: any) => {
  uni.setClipboardData({
    data: text
  })
}

const handleOpenDownloadApp = () => {
  util.showDialogue("请下载奶酪单词APP进行修改哦~", 1000);
}

/**
 * 获取星座
 * @param date_star 日期 2000-02-12
 */
const getZodiacSign = (date_star: string) => {
  const date = new Date(date_star);
  const month = date.getMonth() + 1; // JavaScript的月份是从0开始的，所以需要加1
  const day = date.getDate();

  let sign;

  if (month === 12 && day >= 22 || month === 1 && day <= 19) {
    sign = '摩羯座';
  } else if (month === 1 && day >= 20 || month === 2 && day <= 18) {
    sign = '水瓶座';
  } else if (month === 2 && day >= 19 || month === 3 && day <= 20) {
    sign = '双鱼座';
  } else if (month === 3 && day >= 21 || month === 4 && day <= 19) {
    sign = '白羊座';
  } else if (month === 4 && day >= 20 || month === 5 && day <= 20) {
    sign = '金牛座';
  } else if (month === 5 && day >= 21 || month === 6 && day <= 21) {
    sign = '双子座';
  } else if (month === 6 && day >= 22 || month === 7 && day <= 22) {
    sign = '巨蟹座';
  } else if (month === 7 && day >= 23 || month === 8 && day <= 22) {
    sign = '狮子座';
  } else if (month === 8 && day >= 23 || month === 9 && day <= 22) {
    sign = '处女座';
  } else if (month === 9 && day >= 23 || month === 10 && day <= 22) {
    sign = '天秤座';
  } else if (month === 10 && day >= 23 || month === 11 && day <= 21) {
    sign = '天蝎座';
  } else if (month === 11 && day >= 22 || month === 12 && day <= 21) {
    sign = '射手座';
  }

  return sign || '未知星座';
}

</script>

<style scoped lang="scss">
@mixin fontStyle($size) {
  font-size: #{ $size }rem;
  font-family: xiaolai;
  color: $uni-text-color;
}

.page-container {
  width: 100vw;
  height: 100vh;
  background-color: #F9EEDC;

  .scene-container {
    width: 37.5rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 2rem 20px 0 20px;
  }

  .button-content {
    @include fontStyle(1.7);
    left: 50%;
    transform: translate(-50%);
    position: fixed;
    bottom: calc(2.5rem + constant(safe-area-inset-bottom));
    bottom: calc(2.5rem + env(safe-area-inset-bottom));

    .icon {
      height: 6.2rem;
      width: 20rem;
    }

    .text {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: .2rem;
      transform: translate(-50%, -50%);
    }
  }

  .content {
    padding: 2.5rem 1.5rem;
    background-color: white;
    border-radius: 1.5rem;
    border: 2px solid $uni-bg-color-speak;

    .avatar {
      margin-top: 1rem;
    }

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .header {
        height: 5rem;
        width: 5rem;
        position: absolute;
        right: 0;

        .frame {
          position: absolute;
          height: 8rem;
          width: 8rem;
          top: -1.5rem;
          right: -1.5rem;
        }

        .icon {
          height: 100%;
          width: 100%;
          border-radius: 50%;
        }
      }

      .copy {
        >.text {
          margin-right: .8rem;
        }

        >.button {
          font-size: 1.6rem;
          color: $uni-text-color-btn;
          padding-left: .8rem;
          border-left: 1px solid #979797;
          border-radius: .05rem;
        }
      }

      &:nth-child(n + 2) {
        margin-top: 2.5rem;
      }

      .left {
        @include fontStyle(1.6);
        display: flex;
        align-items: center;

        .icon {
          margin-right: 1rem;
          width: 2.2rem;
          height: 2.2rem;
        }
      }

      .right {
        @include fontStyle(1.3);
        color: $uni-text-color-grey;
        display: flex;
        align-items: center;

        .vip_logo {
          width: 1.5rem;
          margin-right: .5rem;
          vertical-align: text-bottom;
        }

        .icon {
          width: 1rem;
          height: 1rem;
        }
      }
    }
  }
}
</style>